<template>
	<fui-row class="search-input-base">
		<fui-col :span="20" class="search-input-left">
			<fui-search-bar paddingTb="0" searchText="" paddingLr="0" radius="16" height="80" inputBackground="#F3F3F3"
				isLeft :cancel="false" :placeholder="placeholder" @clear="onClear" :value="modelValue"
				@search="onSearch" @input="inputValue"></fui-search-bar>

		</fui-col>
		<fui-col :span="4" class="search-input-right">
			<view class="icon-wrapper">
				<fui-icon name="screen" size="40" color="#0052D9" @click="onFilterIcon"></fui-icon>
			</view>
		</fui-col>
	</fui-row>
</template>

<script>
	export default {
		props: {
			modelValue: String,
			placeholder: {
				type: String,
				default: '搜索'
			}
		},
		data() {
			return {

			}
		},
		emits: {
			'update:modelValue': null,
			'filter': null,
			'search': null,
		},
		methods: {
			inputValue(e) {
				this.$emit('update:modelValue', e.detail.value)
			},
			onClear() {
				this.onSearch()
				this.$emit('update:modelValue', '')
			},
			onFilterIcon() {
				this.$emit('filter')
			},
			onSearch() {
				this.$emit('search')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search {
		&-input {
			&-base {
				padding: 16rpx 32rpx;
				background-color: #fff;
			}

			&-left {
				//
				overflow: hidden;
			}

			&-right {
				display: flex;
				justify-content: flex-end;
			}
		}
	}

	.icon {
		&-wrapper {
			width: 80rpx;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #f2f3ff;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
		}
	}
</style>